<template>
  <div class="login">
    <div class="logo" />
    <!-- <el-button @click="login" :loading="state.btnloading">登录</el-button>
    <span>{{ state2.counter }}</span> -->
    <div class="content">
      <div class="left">
        <h2>智能教育云平台</h2>
      </div>
      <div class="right">
        <el-form
          ref="ruleForm"
          :model="state.ruleForm"
          :rules="state.rules"
          class="ruleForm"
          @keyup.enter="login"
        >
          <el-form-item prop="username" label="账号">
            <el-input
              v-model="state.ruleForm.username"
              placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item prop="pswd" label="密码">
            <el-input
              v-model="state.ruleForm.pswd"
              @paste.capture.prevent="handlefalse"
              @copy.capture.prevent="handlefalse"
              @cut.capture.prevent="handlefalse"
              @keyup="handlefalse"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          <!-- <el-form-item prop="code">
            <el-input
                class="code"
                placeholder="验证码"
                v-model="ruleForm.code"
            >
                <template slot="append">
                    <div class="codeImg" @click="getCode">
                        <img :src="codeImg" />
                    </div>
                </template>
            </el-input>
        </el-form-item> -->
          <el-button @click="login" :loading="state.btnloading">登录</el-button>
          <!-- <ul class="loginBox">
          <li>
            <el-checkbox v-model="rember" class="rember"
              >记住用账号密码</el-checkbox
            >
          </li>
        </ul> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  name:'login'
}
</script>

<script setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import api from "@/api/index";
import utils from "@/utils/index";

const router = useRouter();
const store = useStore();

const state = reactive({
  ruleForm: {},
  rules: {},
  btnloading: null,
});
let login = async () => {
  state.btnloading = true;

  await store.dispatch("login", {
    password: "14e1b600b1fd579f47433b88e8d85291",
    userName: "admin1",
  });
  state.btnloading = false;
  router.push({
    name: "home",
  });
};

// pinia状态管理 快速使用
// import { userInfo } from "@/store/pinia/common";
// const userInfoStore = userInfo();
// const state2 = reactive(userInfoStore);
// onMounted(() => {
//   userInfoStore.counter++;
//   userInfoStore.counter++;
//   userInfoStore.counter++;
//   // console.log(userInfoStore.counter);
//   // console.log("doubleCount");
//   // console.log(userInfoStore.doubleCount);
//   setTimeout(() => {
//     userInfoStore.$reset();
//     // 方法一
//     userInfoStore.$patch({
//       counter: 66,
//     });
//     // 方法二
//     userInfoStore.$patch((state) => {
//       state.counter = 10000;
//     });
//     // 方法三
//     userInfoStore.increment();
//   }, 2000);
// });
</script>

<style lang="scss" scoped>
.login {
  .logo {
    position: absolute;
    left: 3%;
    top: 5%;
    background: url("../assets/logo.png") no-repeat;
    background-size: contain;
    width: 260px;
    height: 50px;
  }

  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    // height: 500px;
    display: flex;
  }
  .left {
    // flex: 1;
    // position: relative;
    width: 50%;
    // height: 100%;
    background: url("../assets/leftBg.png") no-repeat;
    background-size: cover;
    h2 {
      margin: 120px 0 0 40px;
      // font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 28px;
      line-height: 150%;
      color: #fff;
    }
  }
  .right {
    flex: 1;
    padding: 50px 60px 100px;
    background: #fff;
    h1 {
      // padding: 0 0 10px;
      margin: 0 0 30px;
      text-align: center;
      color: #000;
      // font-weight: normal;
      line-height: 150%;
      // font-family: Microsoft YaHei;
      font-size: 22px;
    }
    .ruleForm {
      position: relative;

      .el-input {
        input {
          border-radius: 0;
        }
        &.code {
          // input {
          //     border-radius: 20px 0 0 20px;
          // }
          // .el-input-group__append {
          //     border-radius: 0 20px 20px 0;
          // }
          .codeImg {
            width: 80px;
            cursor: pointer;
          }
        }
      }

      .loginBtn {
        margin-top: 30px;
        width: 100%;
        justify-content: center;
        background: #000;
        border-radius: 0;
      }
      .loginBox {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
        li {
          flex: 1;
          .rember {
            color: #fff;
            .el-checkbox__label {
              color: #666;
            }
            .el-checkbox__inner {
              background: #000;
              border-color: #000;
              border-radius: 50%;
            }
          }
          // .loginBtn {
          //     width: 100%;
          //     justify-content: center;
          // }
        }
      }
    }

    .forget {
      text-align: right;
    }

    .regist {
      position: absolute;
      bottom: 30px;
      width: 100%;
      padding-top: 30px;
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
